<template>
<div class="outer">
  <search-header>
    <span class="back" @click="goBack()"></span>
    <input type="text" slot="inputs" placeholder="络漫宝" v-model="searchString" ref="inputArea">
    <div slot="action" @click="goDataPage(searchString)">搜索</div>
  </search-header>
  <scroll :topArea="44" ref="advice" :pullDownRefresh="false" :pullUpLoad="false">
      <div class="before-search" >
        <div class="search-area">
            <div class="search-title">
                <span>热门搜索</span>
            </div>
            <ul class="search-content">
                <li v-for="h in hotPro"  :key="h.id" @click="fillSearch(h)">{{h}}</li>
            </ul>
        </div>
        <div class="history-record" v-if="historyShow">
            <div class="title">历史记录</div>
            <div class="history-item" v-for="(i,index) in historyRecords" :key="i.id">
                    <span @click="fillSearch(i)">{{i}}</span>
                    <span @click="deleteHistory(index)" class="fa fa-close"></span> 
            </div>
            <div class="clear-all" @click="clearHistory()">清空历史记录</div>
        </div>
      </div>
  </scroll>
</div>
</template>
<script>
import searchHeader from '@/components/searchHeader'
export default {
  name: 'advicePage',
  data: function(){
   return {
      headers: {
        title: "搜索页面"
      },
      historyRecords: [],
      historyShow: true,
      searchString: "络漫宝",
      hotPro: ['MacBook','空气净化器','笔记本','大疆','DELL','乐高','东芝','戴森']
   }
  },
  components: {
    searchHeader
  },
  methods: {
    goBack: function(){
      let originUrl = localStorage.originUrl;
      localStorage.removeItem("originUrl");
      this.$router.push({path: originUrl});
    },
    // 清空历史记录
    clearHistory: function(){
        localStorage.removeItem("searchHistory");
        this.historyRecords = [];
        this.historyShow = false;
    },
    operateStorage: function(){
      var temp = this.searchString;
      if( this.searchString == ""){
          return 
      }
      let tempRecords = [];
      let hasSame = false;
      if(!localStorage.searchHistory){
          localStorage.setItem("searchHistory",JSON.stringify([]));
      }
      if(JSON.parse(localStorage.searchHistory).length>0){
          let self = this;
          tempRecords = JSON.parse(localStorage.searchHistory);
          tempRecords.forEach(function(item){
              if(item == self.searchString ){
                  hasSame = true;
              }
          })
          if(hasSame !== true){
              if( tempRecords.length >9){
                  tempRecords.pop();
              }
              tempRecords.unshift(this.searchString);
          }
      }else {
          tempRecords.unshift(this.searchString);
      }
      localStorage.searchHistory = JSON.stringify(tempRecords);
    },
     // 删除历史记录
    deleteHistory: function(index){
        this.historyRecords.splice(index,1);
        localStorage.searchHistory = JSON.stringify(this.historyRecords);
        if(this.historyRecords.length == 0){
           this.historyShow = false; 
        }      
    },
     // 获取历史记录
    getHistory: function(){
      if(localStorage.searchHistory && JSON.parse(localStorage.searchHistory).length>0){
          this.historyRecords = JSON.parse(localStorage.searchHistory);
          this.historyShow = true; 
      }else {
          this.historyRecords = [];
          this.historyShow = false;
      }
    },
    fillSearch: function(i){
      this.searchString = i;
      this.operateStorage();
      this.goDataPage(this.searchString);
    },
    goDataPage: function(search){
      this.searchString = search;
      this.operateStorage();
      this.$router.push({name:'searchResult' , params: {'searchStr': search}});
    },
  },
  mounted: function(){
    this.$refs.inputArea.focus();
    this.getHistory();
  }
}
</script>
<style lang="scss" scoped>
  .outer {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  .before-search {
    width: 100%;
  }
  .search-area {
    background-color: #fff;
    padding: 0 12px;
    margin-bottom: 10px;
    .search-title {
      height: 46px;
      line-height: 46px;
      font-size: 12px;
      color: #666;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .search-content {
      width: 100%;
      background-color: #fff;
      overflow: hidden;
      &>li {
        float: left;
        padding: 6px 12px;
        border: 1px solid #eee;
        margin-right: 12px;
        font-size: 12px;
        margin-bottom: 16px;
        color: #999;
        border-radius: 2px;
      }
    }
  }
  .history-record {
    background: #fff;
    padding: 0 12px;
    & .title {
      height: 46px;
      line-height: 46px;
      font-size: 12px;
      color: #666;
      border-bottom: 1px solid #eee;
    }
    & .history-item {
      width: 100%;
      height: 36px;
      line-height: 36px;
      font-size: 12px;
      color: #999;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &>span:first-child {
        width: 312px;
        display:block;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
    }
    & .clear-all {
      width: 100%;
      height: 36px;
      line-height: 36px;
      text-align: center;
      color: #999;
      font-size: 12px;
    }
  }
</style>